<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>菜谱详情以及做法</title>
    <link rel="stylesheet" href="./css/style.css" />
</head>

<body>
    <h3 class="big-tit">菜品详情</h3>
    <div class="container">
        <div class="title-box">
            <h3>菜品标题名称</h3>
            <p>作者姓名</p>
        </div>
        <img class="show-img" src="http://yun.itheima.com/Upload/Images/20220627/62b924298e658.jpg" alt="" />
        <blockquote>
            <span
                class="txt_tart">“</span>非常时期，各位小主被禁足后，必须得找点乐子，才蒜不辜负这特殊时期呀！近几日我大陕西的面皮火了，虽有点耗时，但绝对美味！酸辣过瘾，筋道爽滑，家常做法，供大家参考！<span
                class="txt_end">”
        </blockquote>
        <div class="info-box">
            <div class="mo mt20">
                <h3>食材明细</h3>
            </div>
            <!-- 主料 -->
            <fieldset class="particulars">
                <legend>主料</legend>
                <div class="recipeCategory_sub_R clear form4">
                    <ul>
                     
                    </ul>
                </div>
            </fieldset>
            <!-- 辅料 -->
            <fieldset class="particulars">
                <legend>辅料</legend>
                <div class="recipeCategory_sub_R clear thess">
                    <ul>
                    

                    </ul>
                </div>
            </fieldset>
            <!-- 调料 -->
            <fieldset class="particulars">
                <legend>调料</legend>
                <div class="recipeCategory_sub_R clear tow">
                    <ul>
                    
                    </ul>
                </div>
            </fieldset>

            <!-- 口味 -->
            <div class="recipeCategory_sub_R  one">
                <ul>
               

                </ul>
            </div>

            <div class="mo mt20">
                <h3>xxxx的做法步骤</h3>
            </div>
            <div class="recipeStep">
                <ul>
             

                </ul>
            </div>
        </div>
    </div>
</body>
<script src="../jquery.js"></script>
<script>
    $(function () {

let imgss=localStorage.getItem('imgss')
$('.show-img').attr('src',imgss)

        let n = localStorage.getItem('xuan')
        $.ajax({
            method: 'get',
            url: `http://124.223.14.236:3001/api/recipeInfo/${n}`,
            success({ data }) {
                console.log(data);
                $('.recipeStep ul').html(data.context)
                let type = JSON.parse(data.raw_type)
                let tl = JSON.parse(data.raw_tl_list)
                let fu = JSON.parse(data.raw_fu_list)
                let raw = JSON.parse(data.raw_fu_list)
                console.log(type);
                // type渲染
                let typen = type.map(item => {
                    return `
                    <li>
                        <span class="category_s1">
                            <a title="酸辣" href="recipe-type-do-cuisine-view-5.html" target="_blank">${item.name}</a>
                        </span>
                        <span class="category_s2">${item.num}</span>
                    </li>
                    `
                }).join('')
                $('.one ul').html(typen)
                // 调料部分
                let tln = tl.map(item => {
                    return `
                    <li>
                            <span class="category_s1">
                                <b>${item.name}</b>
                            </span>
                            <span class="category_s2">${item.num}</span>
                        </li>
                    `
                }).join('')
                $('.tow').html(tln)
                // 佐料
                let fun = fu.map(item => {
                    return `
                    <li>
                        <span class="category_s1">
                                <a href="/YuanLiao/YouPoLaZi/" title="油泼辣子的做法" target="_blank"><b>${item.name}</b></a>
                            </span>
                            <span class="category_s2">${item.num}</span>        
                        </li>
                    `
                }).join('')
                $('.thess').html(fun)
                // 主料
                let rawn = fu.map(item => {
                    return `
                    <li>
                            <span class="category_s1">
                                <a href="/YuanLiao/ZhongJinMianFen/" title="面粉的做法" target="_blank"><b>面粉</b></a>
                            </span>
                            <span class="category_s2">适量</span>
                        </li>
                    `
                }).join('')
                $('.form4').html(rawn)

                // 美食描述
                $('blockquote').html(data.description)
                $('.title-box p').html(data.author)
                $('.title-box h3').html(data.title)
            }
        })
    })

</script>

</html>